<template>
  <div class="common-layout">
    <div class="aside">
      <Aside></Aside>
    </div>
    <div class="container">
      <div class="header" @click="change()">
        <Header></Header>
      </div>
      <div class="mainBox">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Aside from "@/components/aside.vue";
import Header from "@/components/header.vue";
import { useUserStore } from "@/store/user";
const userStore = useUserStore();

const change = () => {
  userStore.setUser({
    id: 1,
    name: "2",
    email: "1",
    password: "1",
    role: "1",
    avatar: "1",
    createdAt: "1",
    updatedAt: "1",
  });
  userStore.setToken("1")
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.common-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
}
.aside {
  width: 180px;
  height: 100%;
  background-color: #333;
}
.container {
  width: calc(100% - 180px);
  height: 100%;
  //   display: flex;
  .header {
    width: 100%;
    height: 80px;
    background-color: green;
  }
  .mainBox {
    width: 100%;
    height: calc(100% - 80px);
    // background-color: yellow;
  }
}
</style>
